<template>
  <div class="homeContent">
    <div class="title">热门精选</div>
    <div class="list">
      <template v-for="item in houseList" :key="item.data.houseId">
        <template v-if="item.discoveryContentType === 9">
          <house-item-v9 :item-data="item.data"></house-item-v9>
        </template>
        <template v-else>
          <house-item-v3 :item-data="item.data"> </house-item-v3>
        </template>
      </template>
    </div>

    <!-- <button @click="moreList">请求数据</button> -->
  </div>
</template>

<script setup>
import useHomeStore from "@/stores/modules/home";
import { storeToRefs } from "pinia";
import houseItemV3 from "@/components/houseItemV3/house-item-v3.vue";
import houseItemV9 from "@/components/houseItemV9/house-item-v9.vue";
import { useScroll } from "@/utils/useScroll";
import { watch } from "vue";

const homeStore = useHomeStore();
homeStore.getHomelistsAction();
// const moreList = () => {
//   homeStore.getHomelistsAction();
// };
const { houseList } = storeToRefs(homeStore);
/* 上拉加载更多 */
const { isReachBottom } = useScroll();

watch(isReachBottom, (newValue) => {
  if (newValue === true) {
    homeStore.getHomelistsAction().then(() => {
      isReachBottom.value = false;
    });
  }
});
</script>

<style lang="less" scoped>
.homeContent {
  padding: 0 20px;
  padding-bottom: 50px;

  .title {
    font-size: 22px;
    font-weight: 700;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
